<template>
	<view class="dx-body">
		<dx-table ref="table" :header="tableHeader" :buttons="buttons" :tableParams="tableParams">
			<template #tableSearch="searchScoped">
				<!-- 自定义搜索 -->
				<dx-search
					@search="search"
					@reset="reset"
					:columns="searchScoped.searchColumns"
					:searchCol="searchScoped.searchCol"
					v-show="searchScoped.isShowSearch"
				>
					<template #search-title="scoped">
						<el-input v-model="scoped.row.title" placeholder="我是自定义搜索"></el-input>
					</template>
				</dx-search>
			</template>
			<!-- 自定义列 -->
			<template #column-title="scoped">
				{{ scoped.row.title }}
			</template>
		</dx-table>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const tableHeader = reactive({
	tips: '测试数据',
});
const buttons = ref([
	'refresh',
	'add',
	'edit',
	'del',
	function (h: any) {
		return h(
			ElButton,
			{
				type: 'primary',
				class: 'mt-10px',
				on: {
					click: () => {
						console.log('自定义按钮');
					},
				},
			},
			() => '自定义按钮'
		);
	},
]);
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		height: 55,
	},
	showOverflow: 'tooltip',
	urls: {
		index: 'test/index',
		add: 'test/add',
		edit: 'test/edit',
		del: 'test/del',
		multi: 'test/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{ type: 'seq', field: 'seq', label: '序号', width: '60px', operator: false },
		{
			label: '标题',
			field: 'title',
			width: '200px',
			rules: [
				{
					required: true,
					message: '标题不能为空',
				},
			],
		},
		{
			label: '首图',
			field: 'image',
			render: 'dx-image',
			width: '80px',
			component: {
				name: 'dx-upload',
			},
			rules: [
				{
					required: true,
					message: '首图不能为空',
				},
			],
		},
		{
			label: '轮播图',
			field: 'images',
			operator: false,
			render: 'dx-image',
			minWidth: '500px',
			component: {
				name: 'dx-upload',
				props: {
					limit: 9,
				},
			},
		},
		{
			label: '备注',
			field: 'content',
			width: '200px',
			visible: false,
			component: {
				name: 'dx-tinymce',
				props: {},
			},
		},
		{
			label: '创建时间',
			field: 'create_date',
			width: '200px',
			form: false,
			formatter: 'dxFormatDate',
		},
		{
			type: 'operate',
			field: 'operate',
			label: '操作',
			width: '120px',
			fixed: 'right',
			operator: false,
			buttons: ['edit', 'del'],
		},
	],
});

const table = ref();
onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value.getTableList();
	});
});
function search(param: any) {
	table.value.search(param);
}
function reset() {
	table.value.reset();
}
</script>

<style lang="scss"></style>
